<template>
	<Scroll class="toplist" ref="toplist" :data="topList">
		<!-- 排行榜列表 -->
		<ul ref="rank">
			<li class="item" v-for="(item, index) in topList" :key="index" @click="selectItem(item)">
				<!-- 榜单图片 -->
				<div class="item-icon">
					<img :src="item.picUrl" alt="">
				</div>
				<!-- 右侧前三个歌曲 -->
				<ul class="item-songlist">
					<li class="item-songlist-son" v-for="(song, index) in item.songList" :key="index">
						<span>{{index + 1}}.</span>
						<span>{{song.songname}}&nbsp;-&nbsp;{{song.singername}}</span>
					</li>
				</ul>
			</li>
		</ul>
		<!-- 加载框 -->
		<div class="loading" v-show="topList.length===0 ? 1:0">
			<Loading></Loading>
		</div>
		<!-- 排行榜详情页 -->
		<router-view></router-view>
	</Scroll>
</template>

<script>
import { mapMutations } from 'vuex'
import Scroll from 'base/scroll/Scroll'
import Loading from 'base/loading/Loading'
import { getTopList } from 'api/rank'
import { ERR_OK } from 'api/config'
import { playlistMixin } from 'assets/js/mixin'

export default {
	mixins: [playlistMixin],
	components: {
		Scroll,
		Loading
	},
	data() {
		return {
			topList: []
		}
	},
	created() {
		this._getTopList()
	},
	methods: {
		handlePlaylist(playlist) {
      if (this.$refs.rank) {
        const bottom = playlist.length > 0 ? "60px" : ""
        this.$refs.rank.style.paddingBottom = bottom
        this.$refs.toplist.refresh()
      }
    },
    selectItem(item) {
      /* const isMv = item.topTitle.indexOf('MV') !== -1
      console.log(isMv);
      if (isMv) {
        this.$router.push({
          path: `/rank/mv`
        });
      } else {
        this.$router.push({
          path: `/rank/${item.id}`
        });
        this.setTopList(item);
      } */
      this.$router.push({
        path: `/rank/${item.id}`
      })
      this.setTopList(item)
    },
    _getTopList() {
      getTopList().then(res => {
        if (res.code === ERR_OK) {
          this.topList = res.data.topList
          // console.log(this.topList);
        }
      });
    },
    ...mapMutations({
      setTopList: "SET_TOP_LIST"
    })
	}
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.toplist {
  width: 100%;
  height: 86vh;
  overflow: hidden;
}
.toplist ul .item {
  display: flex;
	height: rem(100);
  margin: 0 rem(20);
  padding: rem(10) 0;
  
}
.toplist ul .item:first-child {
  padding-top: rem(10);
}
.toplist ul .item:last-child {
  padding-bottom: rem(20);
}
.item .item-icon {
  flex: 0 0 rem(100);
  width: rem(100);
  height: rem(100);
  
}
.item .item-icon img {
  width: rem(100);
  height: rem(100);
  border-top-left-radius: rem(5);
  border-bottom-left-radius: rem(5);
}
.item .item-songlist {
  flex: 1;
  display: flex;
	height: rem(100);
  flex-direction: column;
  justify-content: center;
  padding: 0 rem(20);
  overflow: hidden;
  background: #333;
  color: rgba(255, 255, 255, 0.486);
  font-size: rem(13);
  border-top-right-radius: rem(5);
  border-bottom-right-radius: rem(5);
}
.item-songlist .item-songlist-son {
  max-height: rem(26);
  line-height: rem(26);
  overflow: hidden;
}
.item-songlist .item-songlist-son span {
  width: 100%;
  overflow: hidden;
}
</style>